<script setup>
import { ref } from 'vue'
import { ElButton, ElCard, ElRow, ElCol } from 'element-plus'
import { useCounterStore } from './stores/counter'
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'

const counterStore = useCounterStore()

const count = ref(0)
const increment = () => {
  count.value++
}
</script>

<template>
  <div class="container">
    <ElRow :gutter="20">
      <ElCol :span="24">
        <ElCard shadow="hover">
          <h1>小采灵犀智能对账助手</h1>
          <p>基于 Vue3 + Vite + Element Plus + Pinia 构建</p>
          <p>Pinia Store 计数器: {{ counterStore.count }} | 双倍计数: {{ counterStore.doubleCount }}</p>
          <ElButton type="primary" @click="counterStore.increment">增加</ElButton>
          <ElButton type="danger" @click="counterStore.decrement" style="margin-left: 10px;">减少</ElButton>
          <ElButton @click="counterStore.reset" style="margin-left: 10px;">重置</ElButton>
          <br/><br/>
          <ElButton type="success" @click="increment">本地计数器: {{ count }}</ElButton>
        </ElCard>
      </ElCol>
    </ElRow>
    
    <ElRow :gutter="20" style="margin-top: 20px;">
      <ElCol :span="12">
        <ElCard shadow="hover">
          <HelloWorld msg="欢迎使用小采灵犀智能对账助手!" />
        </ElCard>
      </ElCol>
      <ElCol :span="12">
        <ElCard shadow="hover">
          <TheWelcome />
        </ElCard>
      </ElCol>
    </ElRow>
  </div>
</template>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
</style>